<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/Customized.css?v=1">
    <style>
        .hui a,.hui{
            color: black;
            cursor: pointer;
            padding: 10px;
            border: 1px solid rgb(221, 221, 221);
            background: linear-gradient(to bottom, #FFF, #f0f0f0);
            border-radius: 5px;
        }
    </style>
</head>
<body>
<form name="form">
    <div class="shi">搜索条件</div>
    <div class="kaoshi">
        <span>试卷名称: <input name="name" type="text" value="${param.name}"></span>
        <span>考试时间: <input name="date" type="date" value="${param.date}"></span>
        <span>-<input name="date" type="date" value="${param.date}"></span>
        <span><input name="cha" type="submit" value="查询" /></span>
    </div>
    <div class="hui">
        <a href="TeacherExamServlet">自定义班级测试</a>
    </div>
</form>
<script>
    addEventListener('load', () => {
        document.querySelectorAll(".table>.tbody").forEach((e, i) => {
            e.addEventListener('scroll', function() {
                // 取得.thead的div
                let thead = this.parentNode.querySelector('.thead');
                // 当.tbody向左滚动时，改变.thead的margin-left，使.thead与.tbody同时向左滚动，形成一体的效果
                thead.style.marginLeft = -this.scrollLeft + 'px';
            })
        })
    })
</script>
<!-- 整体思路：
1.用div.table作为表格容器，采用flex-column布局,高度由外部的容器决定
2.用途div.table>.thead作为表头，设置固定高度32px
3.用div.table>.tbody作为表主题，设置高度为flex，自由高度
-->
<div class="wrapper">
    <div class="table">
        <div class="thead">
            <table>
                <tr>
                    <td style="min-width: 202.8px;">试卷名称</td>
                    <td style="min-width: 121px;">试卷类型</td>
                    <td style="min-width: 175px;">考试时间</td>
                    <td style="min-width: 167px;">创建者</td>
                    <td style="min-width: 167px;">创建时间</td>
                    <td style="min-width: 36.8px;">操作</td>
                </tr>
            </table>
        </div>
        <div class="tbody">
            <table>
                <c:forEach items="${pageInfo.list}" var="it" varStatus="vs">
                    <tr>
                        <td style="min-width: 202.8px;"><a href="">${it.pagername}</a></td>
                        <td style="min-width: 121px;">${it.etype}</td>
                        <td style="min-width: 175px;">${it.starttime}</td>
                        <td style="min-width: 167px;">${it.teachername}</td>
                        <td style="min-width: 167px;">${it.testtime}</td>
                        <td style="min-width: 36.8px;"></td>
                    </tr>
                </c:forEach>

            </table>
        </div>
    </div>
    <div class="bottom">
        <form>
        <div class="page-bar">
            <select name="pageSize" onchange="this.form.submit();">
                <option value="5" ${(requestScope.pageSizeValue == '5' || sessionScope.examPageSize == '5') ? 'selected' : ''}>5</option>
                <option value="10" ${(requestScope.pageSizeValue == '10' || sessionScope.examPageSize == '10') ? 'selected' : ''}>10</option>
                <option value="15" ${(requestScope.pageSizeValue == '15' || sessionScope.examPageSize == '15') ? 'selected' : ''}>15</option>
            </select>
            |
            <a id="myLink" href="ExamServlet?name=${param.name}&date=${param.date}&page=1" onclick="${pageInfo.page>1 ? '' : 'event.preventDefault();'}" ${pageInfo.page>1 ? '' : 'disabled'}>
                <svg t="1706594144654" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="32967" width="16" height="16">
                    <path
                            d="M230.951385 51.042462v945.230769h-157.538462v-945.230769h157.538462z m78.76923 472.615384l630.153847-472.615384v945.230769l-630.153847-472.615385z"
                            fill="#649CF0" p-id="32968"></path>
                </svg>
            </a>
            <a id="myLink" href="ExamServlet?name=${param.name}&date=${param.date}&page=${pageInfo.page-1}" onclick="${pageInfo.page>1 ? '' : 'event.preventDefault();'}" ${pageInfo.page>1 ? '' : 'disabled'}>
                <svg t="1706594424218" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="52291" width="22" height="22">
                    <path
                            d="M689 165.1L308.2 493.5c-10.9 9.4-10.9 27.5 0 37L689 858.9c14.2 12.2 35 1.2 35-18.5V183.6c0-19.7-20.8-30.7-35-18.5z"
                            fill="#1296DB" p-id="52292"></path>
                </svg>
            </a>
            |
            第${pageInfo.page}页，共${pageInfo.pages}页，总记录数：${pageInfo.count}
            |
            <a id="myLink" href="ExamServlet?name=${param.name}&date=${param.date}&page=${pageInfo.page+1}" onclick="${pageInfo.page<pageInfo.pages ? '' : 'event.preventDefault();'}" ${pageInfo.page<pageInfo.pages ? '' : 'disabled'}>
                <svg t="1706594517141" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="55058" width="22" height="22">
                    <path
                            d="M715.8 493.5L335 165.1c-14.2-12.2-35-1.2-35 18.5v656.8c0 19.7 20.8 30.7 35 18.5l380.8-328.4c10.9-9.4 10.9-27.6 0-37z"
                            fill="#1296DB" p-id="55059"></path>
                </svg>
            </a>
            <a id="myLink" href="ExamServlet?name=${param.name}&date=${param.date}&page=${pageInfo.pages}" onclick="${pageInfo.page<pageInfo.pages ? '' : 'event.preventDefault();'}" ${pageInfo.page<pageInfo.pages ? '' : 'disabled'}>
                <svg t="1706594203741" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="41510" width="16" height="16">
                    <path
                            d="M782.336 51.042462h157.538462v945.230769h-157.538462v-945.230769z m-78.769231 472.615384l-630.153846 472.615385v-945.230769l630.153846 472.615384z"
                            fill="#649CF0" p-id="41511"></path>
                </svg>
            </a>
            |
            <a>
                <svg t="1706594740831" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="60596" width="16" height="16">
                    <path
                            d="M509.5936 1024C256.8192 1024 51.2 820.20352 51.2 569.81504c0-250.39872 205.6192-454.1952 458.3936-454.1952h0.3584c37.16096 0 74.30144 4.5056 110.3872 13.35296l1.23904 0.3072 34.38592 8.45824-50.50368-95.0272a29.3376 29.3376 0 0 1-2.23232-22.19008A28.71296 28.71296 0 0 1 630.67136 0c10.8032 0 20.71552 5.96992 25.7536 15.5136l86.272 162.304c3.62496 6.7584 4.42368 14.88896 2.21184 22.17984a28.66176 28.66176 0 0 1-13.98784 17.152l-160.60416 85.41184a28.7232 28.7232 0 0 1-13.44512 3.35872 28.9792 28.9792 0 0 1-25.7024-15.50336c-7.60832-14.2848-2.27328-31.9488 11.75552-39.424l65.97632-35.09248 36.9664-19.6608-42.19904-10.06592a405.02272 405.02272 0 0 0-94.07488-11.02848c-219.92448 0-398.88896 176.9984-398.88896 394.67008s178.96448 394.6496 398.88896 394.6496 398.88896-176.97792 398.88896-394.6496c0-64.63488-15.28832-126.2592-45.39392-183.01952a29.92128 29.92128 0 0 1 12.36992-40.25344c4.28032-2.2528 9.08288-3.45088 13.96736-3.46112a29.58336 29.58336 0 0 1 26.2144 15.79008 451.9424 451.9424 0 0 1 52.34688 210.944C967.9872 820.20352 762.368 1024 509.5936 1024z"
                            fill="#2178ED" p-id="60597"></path>
                </svg>
            </a>
        </div>
        </form>
    </div>
</div>
<script>
    var tds = document.getElementsByTagName('tr');
    for (var i = 0; i < tds.length; i++) {
        tds[i].addEventListener('click', function() {
            // 移除之前被点击的单元格的样式
            var prevClickedCell = document.querySelector('.click-highlight');
            if (prevClickedCell !== null) {
                prevClickedCell.classList.remove('click-highlight');
            }
            // 添加点击的单元格样式
            this.classList.add('click-highlight');
        });
    }
</script>
</body>
</html>